<template>
	<view class="shop-item">
		<view class="shop-title flexr align-center">
			<view class="shop-name">{{ item.headOfficeName }}</view>
			<view class="shop-dis">{{ item.distance }}km</view>
		</view>
		<view class="divider2"/>
		<view class="img-txt flexr">
			<img class="icon" :src="BuildImageUrl(item.logo)" mode="aspectFill"/>
			<view class="flexc">
				<view class="shop-addr">
					{{ item.address }}
				</view>
				<view class="shop-time">
					预约时间：{{ item.appointmentDate }} {{ item.appointmentTime }}
				</view>
				<view class="shop-saler">
					导购员：{{item.guideClerkName}}（{{item.mobile}}）
				</view>
			</view>
		</view>
		<view class="btns flexr align-center">
			<image class="img-btn" src="@/static/call.png" @click="call"></image>
			<image class="img-btn" src="@/static/navigation.png" @click="openLocation"></image>
			<view class="flex-1"/>
			<view class="primary-button" v-if="item.appointmentStatus == '预约成功'" @click="cancelAppointment">
				取消预约
			</view>
			<view class="primary-button disable-button" v-else>
				已取消预约
			</view>
		</view>
	</view>
</template>

<script setup>
import { useAppointmentStore } from '@/store/appointment';
import { BuildImageUrl } from '@/api/api';
const appointmentStore = useAppointmentStore();
const props = defineProps({
	item: Object,
})
function call() {
	uni.makePhoneCall({
		phoneNumber: props.item.mobile,
	})
}
function openLocation() {
	uni.openLocation({
		longitude: parseFloat(props.item.longitude),
		latitude: parseFloat(props.item.latitude),
		name: props.item.headOfficeName,
		address: props.item.address,
	})
}
function cancelAppointment() {
  uni.showModal({
    title: "取消预约",
    content: "确定取消预约吗？",
    success: function (res) {
      if (res.confirm) {
        console.log("用户点击确定");
				appointmentStore.cancelAppointment(props.item.recId);
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
}
</script>

<style lang="scss">
.shop-item {
	background-color: white;
	border-radius: 20rpx;
	margin-top: 18rpx;
	.shop-title {
		height: 86rpx;
		justify-content: space-between;
		padding: 0 20rpx;
		.shop-name {
			font-size: 32rpx;
			color: $text-color1;
		}
		.shop-dis {
			font-size: 28rpx;
			color: $text-color2;
		}
	}
	.img-txt {
		padding: 26rpx;
		.icon {
			height: 160rpx;
			width: 160rpx;
			min-width: 160rpx;
			min-height: 160rpx;
			border-radius: 15rpx;
			overflow: hidden;
			margin-right: 22rpx;
		}
		.shop-addr {
			color: $text-color3;
			font-size: 26rpx;
		}
		.shop-time {
			color: $text-color3;
			font-size: 26rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
		.shop-saler {
			color: $text-color3;
			font-size: 26rpx;
		}
	}
	.btns {
		padding: 26rpx;
		.img-btn {
			height: 80rpx;
			width: 80rpx;
		}
		.img-btn + .img-btn {
			margin-left: 26rpx;
		}
		.primary-button {
			width: 256rpx;
			min-width: 256rpx;
		}
	}
}
</style>
